<template>
  <div class="nav-container">
    <div class="header-box">
      <span
        :class="CollapseIconClass"
        class="IconClass"
        @click="editStatus"
      ></span>
      <div class="nav-box">
        <el-breadcrumb separator="/">
          <!-- <el-breadcrumb-item :to="{
                        path: '#/home'
                    }">
                        首页
                    </el-breadcrumb-item> -->
          <el-breadcrumb-item
            v-for="(item, index) in breadcrumbList"
            :key="index"
            :to="{ path: item.path }"
          >
            {{ item.meta.name }}
          </el-breadcrumb-item>
          <!-- <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item> -->
        </el-breadcrumb>
      </div>
      <el-tooltip
        class="item"
        effect="dark"
        content="我的码云"
        placement="bottom"
      >
        <a href="https://gitee.com/sun-liangzhao">
          <img
            class="icon-github"
            src="https://www.easyicon.cc/icon/coreui-icons/node_modules/@coreui/icons/svg/brand/cib-github.svg"
          />
        </a>
      </el-tooltip>

      <el-tooltip
        class="item"
        effect="dark"
        content="我的博客"
        placement="bottom"
      >
        <a href="https://www.cnblogs.com/cn-mrs/">
          <img
            class="icon-blog"
            src="https://www.easyicon.cc/icon/coreui-icons/node_modules/@coreui/icons/svg/brand/cib-blogger.svg"
          />
        </a>
      </el-tooltip>

      <el-dropdown size="small">
        <span><img src="../assets/avatar.jpg" class="avatar" /> </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>个人信息</el-dropdown-item>
          <el-dropdown-item>退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <span class="name">管理员</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "BooksHeader",
  props: {
    CollapseIconClass: String,
    editStatus: Function,
  },
  data() {
    return {
      // breadList: []路由集合
    };
  },
  computed: {
    breadcrumbList() {
      console.log(this.$route.matched);
      return this.$route.matched;
    },
  },
  methods: {},
  created() {},
};
</script>

<style scoped>
/* 头像样式 */
.avatar {
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 10px;
}

.header-box {
  width: 100%;
  margin: 10px 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.nav-box {
  flex: 15;
}

.icon-github {
  width: 18px;
  height: 18px;
}

.icon-blog {
  width: 18px;
  height: 18px;
}

/* 图片之间的间距 */
img {
  margin: 0 8px;
}

.IconClass {
  flex: 1;
  font-size: 20px;
}
</style>